<template>
  <div class="medical-loader" ref="loaderRef">
    <div class="loader-container">
      <!-- Main medical cross -->
      <div class="medical-cross" ref="crossRef">
        <div class="cross-horizontal"></div>
        <div class="cross-vertical"></div>
      </div>
      
      <!-- Rotating pills -->
      <div class="pill pill-1" ref="pill1Ref"></div>
      <div class="pill pill-2" ref="pill2Ref"></div>
      <div class="pill pill-3" ref="pill3Ref"></div>
      
      <!-- Pulsing circles -->
      <div class="pulse-circle pulse-1" ref="pulse1Ref"></div>
      <div class="pulse-circle pulse-2" ref="pulse2Ref"></div>
      
      <!-- Loading text -->
      <div class="loading-text" ref="textRef">
        <span v-for="(char, index) in loadingText" :key="index" class="loading-char">
          {{ char }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { gsap } from 'gsap'

interface Props {
  size?: 'small' | 'medium' | 'large'
  text?: string
  color?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
  text: '加载中',
  color: '#dc2626'
})

// Template refs
const loaderRef = ref<HTMLElement | null>(null)
const crossRef = ref<HTMLElement | null>(null)
const pill1Ref = ref<HTMLElement | null>(null)
const pill2Ref = ref<HTMLElement | null>(null)
const pill3Ref = ref<HTMLElement | null>(null)
const pulse1Ref = ref<HTMLElement | null>(null)
const pulse2Ref = ref<HTMLElement | null>(null)
const textRef = ref<HTMLElement | null>(null)

const loadingText = props.text.split('')

// Animation timeline
let timeline: gsap.core.Timeline | null = null

function setupAnimation() {
  if (!loaderRef.value) return

  timeline = gsap.timeline({ repeat: -1 })

  // Cross animation
  if (crossRef.value) {
    timeline.to(crossRef.value.querySelector('.cross-horizontal'), {
      scaleX: 0.5,
      duration: 0.6,
      ease: "power2.inOut",
      yoyo: true,
      repeat: 1
    }, 0)
    .to(crossRef.value.querySelector('.cross-vertical'), {
      scaleY: 0.5,
      duration: 0.6,
      ease: "power2.inOut",
      yoyo: true,
      repeat: 1
    }, 0.2)
  }

  // Pills rotation
  if (pill1Ref.value && pill2Ref.value && pill3Ref.value) {
    timeline.to([pill1Ref.value, pill2Ref.value, pill3Ref.value], {
      rotation: 360,
      duration: 2,
      ease: "none"
    }, 0)
    .to(pill1Ref.value, {
      x: 20,
      y: -20,
      duration: 1,
      ease: "power2.inOut",
      yoyo: true,
      repeat: 1
    }, 0)
    .to(pill2Ref.value, {
      x: -20,
      y: 20,
      duration: 1,
      ease: "power2.inOut",
      yoyo: true,
      repeat: 1
    }, 0.3)
    .to(pill3Ref.value, {
      x: 15,
      y: 15,
      duration: 1,
      ease: "power2.inOut",
      yoyo: true,
      repeat: 1
    }, 0.6)
  }

  // Pulse circles
  if (pulse1Ref.value && pulse2Ref.value) {
    timeline.to([pulse1Ref.value, pulse2Ref.value], {
      scale: 1.5,
      opacity: 0,
      duration: 1.5,
      ease: "power2.out",
      repeat: -1,
      stagger: 0.3
    }, 0)
  }

  // Loading text animation
  if (textRef.value) {
    const chars = textRef.value.querySelectorAll('.loading-char')
    timeline.to(chars, {
      y: -5,
      duration: 0.3,
      ease: "power2.out",
      stagger: 0.1,
      yoyo: true,
      repeat: 1
    }, 1)
  }
}

onMounted(() => {
  setupAnimation()
})

onUnmounted(() => {
  if (timeline) {
    timeline.kill()
  }
})
</script>

<style scoped>
.medical-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.loader-container {
  position: relative;
  width: v-bind(props.size === 'small' ? '60px' : props.size === 'large' ? '120px' : '80px');
  height: v-bind(props.size === 'small' ? '60px' : props.size === 'large' ? '120px' : '80px');
}

.medical-cross {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
}

.cross-horizontal,
.cross-vertical {
  position: absolute;
  background-color: v-bind(props.color);
  border-radius: 2px;
}

.cross-horizontal {
  width: 24px;
  height: 4px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cross-vertical {
  width: 4px;
  height: 24px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pill {
  position: absolute;
  width: 8px;
  height: 16px;
  background: linear-gradient(135deg, #ff6b6b, #ffd93d);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pill-1 {
  top: 10%;
  right: 20%;
}

.pill-2 {
  bottom: 10%;
  left: 20%;
}

.pill-3 {
  top: 20%;
  left: 10%;
}

.pulse-circle {
  position: absolute;
  border: 2px solid v-bind(props.color);
  border-radius: 50%;
  opacity: 0.6;
}

.pulse-1 {
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pulse-2 {
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-text {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: v-bind(props.size === 'small' ? '12px' : props.size === 'large' ? '16px' : '14px');
  font-weight: 500;
  color: v-bind(props.color);
  white-space: nowrap;
}

.loading-char {
  display: inline-block;
  margin: 0 1px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .medical-loader {
    padding: 1rem;
  }
  
  .loader-container {
    width: v-bind(props.size === 'small' ? '50px' : props.size === 'large' ? '100px' : '70px');
    height: v-bind(props.size === 'small' ? '50px' : props.size === 'large' ? '100px' : '70px');
  }
}
</style> 